<template>
    <div class="poem">
        <p class="poem-content">年少不知愁滋味，老来方知行路难</p>
        <div class="add-btn">
            <span class="iconfont" @click="toAddPage">&#xe68f;</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "Poem",
    methods: {
        toAddPage () {
            this.$router.push({
                path: '/add'
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
    .poem
        width 100%
        height 6rem
        z-index 100
        background #20716a
        display flex
        align-items center
        justify-content center
        .poem-content
            color white
            font-size .45rem
        .add-btn
            width 1.7rem
            height 1.7rem
            position fixed
            right .3rem
            bottom .5rem
            display flex
            align-items center
            justify-content center
            span 
                font-size 1.5rem
                color gray
                background white
                border-radius 50%
                display block
</style>


